{% extends 'todo/base.html' %}

{% block content %}
<h2>日历视图</h2>
<p>在这里查看您有截止日期的任务。</p>
<div id="calendar"></div>

<hr style="margin: 30px 0;">

<h3>无截止日期的任务</h3>
<div class="undated-todos">
    {% for todo in undated_todos %}
        {% with priority_val=todo.priority|stringformat:"s" %}
        <div class="todo-item {% if priority_val == '3' or priority_val == 'H' %}priority-high{% elif priority_val == '2' or priority_val == 'M' %}priority-medium{% else %}priority-low{% endif %} {% if todo.completed %}completed{% endif %}">
            <h3><a href="{% url 'edit_todo' todo.id %}" style="color: inherit; text-decoration: none;">{{ todo.title }}</a></h3>
            <p>{{ todo.content|truncatechars:80 }}</p>
            {% if todo.category %}
                <span class="category-tag">{{ todo.category.name }}</span>
            {% endif %}
            <span class="priority-badge">
                {% if priority_val == '3' or priority_val == 'H' %}高
                {% elif priority_val == '2' or priority_val == 'M' %}中
                {% else %}低
                {% endif %}
            </span>
            <div class="actions" style="position: absolute; bottom: 15px; right: 15px;">
                <a href="{% url 'edit_todo' todo.id %}" style="margin: 0 10px;">编辑</a>
            </div>
        </div>
        {% endwith %}
    {% empty %}
        <p>所有任务都有截止日期，或者您还没有任何任务。</p>
    {% endfor %}
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
      initialView: 'dayGridMonth',
      headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,listWeek'
      },
      events: '/api/todos/', // 从API加载事件
      locale: 'zh-cn', // 设置为中文
      eventClick: function(info) {
        info.jsEvent.preventDefault(); // 阻止浏览器跳转
        if (info.event.url) {
          window.open(info.event.url); // 在新标签页中打开编辑链接
        }
      }
    });
    calendar.render();
  });
</script>

{% endblock %} 